<template>
  <div class="tiaoxuan_head">
    <van-icon @click="toback" class="icon_back_" name="arrow-left" />
    <van-dropdown-menu>
      <van-dropdown-item
              title="排序"
              v-model="value1"
              :options="option1"
              @change="carSort(value1)" />

      <van-dropdown-item
              title="车辆配置"
              v-model="value2"
              :options="option2"
              @change="carConfig(value2)"/>
      <van-dropdown-item
              title="车辆品牌"
              v-model="value3"
              :options="option3"
              @change="carBrand(value3)"/>
    </van-dropdown-menu>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      value1: '',
      value2: '',
      value3: '',

      option1: [
        { text: "价格从低到高", value: 1 },
        { text: "价格从高到低", value: 2 },
      ],
      option2:[],
      option3:[]
    };
  },
  // beforeCreate() {
  //   console.log("created()----")
  //   this.option2();
  //   this.option3();
  // },
  created() {
    console.log("created()")
    this.options2();
    this.options3()
  },
  methods: {
    options2(){
      this.$http.get("/car/cars/getTypeConfigAll").then(res=>{
        this.option2=res.data.data
      })
    },
    options3(){
      this.$http.get("/car/brand/list").then(res=>{
        this.option3=res.data.data

      })
    },
    toback() {
      window.history.back();
    },
    //车辆排序
    carSort(v){
      this.$http.get("/car/cars/carSort?shopId="+this.$root.shopId+"&type="+this.$root.typeId+"&value="+v).then(res=>{
        console.log("carSort")
        console.log(res.data.data);
        this.$root.list_r=res.data.data
      })
    },
    //车辆配置
    carConfig(v){
      this.$http.get("/car/cars/carConfig?shopId="+this.$root.shopId+"&type="+this.$root.typeId+"&value="+v).then(res=>{
        console.log("carConfig")
        console.log(res.data.data);
        this.$root.list_r=res.data.data
      })

    },
    //车辆品牌
    carBrand(v){
      this.$http.get("/car/cars/carBrand?shopId="+this.$root.shopId+"&type="+this.$root.typeId+"&value="+v).then(res=>{
        console.log("carBrand")
        console.log(res.data.data);
        this.$root.list_r=res.data.data
      })
    }
  },
  components: {},
};
</script>

<style scoped lang="less">
.tiaoxuan_head {
  width: 100%;
  height: 0.88rem;
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  .icon_back_ {
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    top: 0.24rem;
    left: 0.24rem;
    font-size: 0.4rem;
    z-index: 2;
  }
  .tiao_head {
    width: 95%;
    height: 0.88rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    li {
      flex: 1;
      height: 100%;
      line-height: 0.88rem;
      text-align: center;
      span {
        font-size: 0.26rem;
        font-weight: 600;
      }
      i {
        transform: rotateZ(90deg);
        color: #cccccc;
      }
    }
  }
}
</style>
